<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>木刻手机</title>
		<link rel="stylesheet" href="./css/normalize.css">
		<link rel="stylesheet" href="./css/index.css">
		<link rel="stylesheet" href="./css/animate.css">
	</head>

	<body>
		<div id="box">
			<header class="header">
				<div class="header-wrap">
					<div class="header-logo">
						慕课手机
					</div>
					<nav class="header-nav">
						<a class="header-nav-ltem header-nav-ltem_active" href="javascript:;">首页</a>
						<a class="header-nav-ltem" href="javascript:;">外观</a>
						<a class="header-nav-ltem" href="javascript:;">配置</a>
						<a class="header-nav-ltem" href="javascript:;">型号</a>
						<a class="header-nav-ltem" href="javascript:;">说明</a>
						<a class="header-nav-ltem header__nav-item_custom_button" href="javascript:;">立即购买</a>
						<div class="header__nav-tip"></div>
					</nav>
				</div>
			</header>
			<div class="screen-1">
				<h1 class="screen-1-heading screen-1-heading_animate_init">
					<span class="pink">慕课手机 </span>
					让你的生活更精彩
				</h1>
				<div class="screen-1__phone screen-1__phone_animate_init"></div>
				<div class="screen-1__shadow screen-1__shadow_animate_init"></div>
			</div>
			<div class="screen-2">
				<h2 class="screen-2__heading">优美的设计，更令人着迷</h2>
				<h3 class="screen-2__subheading">采用受欢迎的设计，让它更加出色。<br />
					款式小巧、轻便手感更舒适。绚丽高清的显示屏，整个外观显得格外精致。</h3>
				<div class="screen-2__phone">
					<div class="screen-2__point_left screen-2__point_i_1">高清摄像</div>
					<div class="screen-2__point_right screen-2__point_i_2">超薄机身</div>
					<div class="screen-2__point_right screen-2__point_i_3">大屏显示</div>
				</div>
			</div>
			<div class="screen-3">
				<div class="screen-3_wrap">
					<h1 class="screen-3__title">外形小巧，功能强大的手机</h1>
					<h3 class="screen-3__detail">采用受欢迎的设计，让它更加出色。<br />
						款式小巧、轻便手感更舒适。绚丽高清的显示屏，整个外观显得格外精致。
					</h3>
					<div class="screen-3__phone"></div>
					<div class="screen-3__cube">
						<div class="screen-3-cube__item">
							<div class="screen-3__features__item__number">5.7</div>
							<div class="screen-3__features__item__desc">英寸大屏</div>
						</div>
						<div class="screen-3-cube__item">
							<div class="screen-3__features__item__number">1200万</div>
							<div class="screen-3__features__item__desc">像素</div>
						</div>
						<div class="screen-3-cube__item">
							<div class="screen-3__features__item__number">3D</div>
							<div class="screen-3__features__item__desc">touch</div>
						</div>
						<div class="screen-3-cube__item">
							<div class="screen-3__features__item__number">A9</div>
							<div class="screen-3__features__item__desc">处理器</div>
						</div>
					</div>
				</div>
			</div>
			<div class="screen-4">
				<div class="screen-4_wrap">
					<h2 class="screen-4__heading">丰富的手机型号</h2>
					<h3 class="screen-4__subheading">找到适合你的手机</h3>
					<div class="screen-4__type">
						<div class="screen-4__type_item screen-4__type__item_i_1 screen-4__type_item_left">
							<div class="screen-4__type_item_color">
								慕课红
							</div>
							<div class="screen-4__type_item_storage">16G/32G/64G</div>
						</div>
						<div class="screen-4__type_item screen-4__type__item_i_2">
							<div class="screen-4__type_item_color">土豪金</div>
							<div class="screen-4__type_item_storage">16G/32G/64G</div>
						</div>
						<div class="screen-4__type_item screen-4__type__item_i_3">
							<div class="screen-4__type_item_color">太空灰</div>
							<div class="screen-4__type_item_storage">16G/32G/64G</div>
						</div>
						<div class="screen-4__type_item screen-4__type__item_i_4">
							<div class="screen-4__type_item_color">绅士黑</div>
							<div class="screen-4__type_item_storage">16G/32G/64G</div>
						</div>
					</div>
				</div>
			</div>
			<div class="screen-5">
				<div class="screen-5_wrap">
					<h2 class="screen-5__heading">游戏、学习、拍照、有这一部就够了</h2>
					<h3 class="screen-5__subheading">看视频、拍摄高清视频与照片、视频聊天、一机多功能，让您生活更丰富精彩。</h3>
					<div class="screen-5__bg"></div>
				</div>
			</div>
			<div class="screen-buy">
				<a class="buy_liji" href="">立即购买</a>
			</div>
			<footer class="footer">© 2016 imooc.com 京ICP备13046642号</footer>
			<div class="outline">
				<a class="outline-item outline-item-select" href="javascript:;">首页</a>
				<a class="outline-item" href="javascript:;">外观</a>
				<a class="outline-item" href="javascript:;">配置</a>
				<a class="outline-item" href="javascript:;">型号</a>
				<a class="outline-item" href="javascript:;">说明</a>
			</div>
		</div>
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
	</body>

</html>
